<template>
  <div class="mainContent">
    <a-spin :spinning="spinning">
      <div style="width: 90%; margin: 0 auto; margin-top: 30px">
        <a-row>
          <a-col :xs="{ span: 24 }" :sm="{ span: 4 }" class="formGroupTitle"
            >扣款记录</a-col
          >
        </a-row>
        <a-table
          size="middle"
          :scroll="{ y: '38vh' }"
          :columns="columns"
          :dataSource="queryDetail"
          :pagination="false"
          :rowKey="(record) => record.transOrderNo"
        >
          <span slot="accountType" slot-scope="record">{{
            record.accountType | accountTypeFilter
          }}</span>
          <span slot="cutAmount" slot-scope="record">{{
            record.cutAmount | cashfilter
          }}</span>
        </a-table>
        <!-- <a-pagination
          @change="onPageChange"
          :current="pagination.current"
          :total="pagination.total"
          :pageSize="query.pageSize"
          style="margin-top: 20px"
        /> -->
        <a-button style="margin-top: 10px" @click="backTransList">
          <a-icon type="double-left" />返回
        </a-button>
      </div>
    </a-spin>
  </div>
</template>

<script>
import { message } from "ant-design-vue";
import api from "@/common/api";
import { error } from "util";
import { fail } from "assert";
const columns = [
  {
    title: "实扣服务商会员编号",
    dataIndex: "cutAgentMemberNo",
  },
  {
    title: "实扣服务商名称",
    dataIndex: "cutAgentMemberName",
  },
  {
    title: "实际扣款时间",
    dataIndex: "cutDateTime",
  },
  {
    title: "扣款账户",
    scopedSlots: { customRender: "accountType" },
  },

  { title: "实扣金额", scopedSlots: { customRender: "cutAmount" } },
];

export default {
  name: "payInstalmentsQueryDetail",
  components: {},
  data() {
    return {
      columns,
      iconLoading: false,
      spinning: false,
      queryDetail: [],
      list: [],
      pagination: { current: null, total: null },
    };
  },
  watch: {},
  computed: {},
  filters: {
    accountTypeFilter: function (value) {
      if (value) {
        if (value == "cash") {
          return "现金账户";
        } else if (value == "market") {
          return "营销账户";
        } else {
          return value;
        }
      }
    },
    cashfilter(value) {
      return parseFloat(value / 100).toFixed(2) + "元";
    },
  },
  mounted() {
    let id = this.$route.params.id;
    this.getDetail(id);
  },
  methods: {
    onPageChange: function (page, pageSize) {
      console.info(page, pageSize);
      this.query.page = page;
      this.query.pageSize = pageSize;
      this.handleSearch();
    },
    getDetail(id) {
      api.getActivityListDetail(
        { data: id },
        (res) => {
          console.log(res);
          if (res.code == "OK") {
            this.queryDetail = res.list;
          }
        },
        (err) => {}
      );
    },

    backTransList() {
      this.$router.push("/riskManager/riskCutQuery");
    },
  },
};
</script>

<style lang="less" scoped>
.card_sty {
  margin-bottom: 30px;
}

.mainContent {
  overflow-y: scroll;
  height: 100%;
  padding: 30px;
}

/* 滚动条样式 */
.mainContent::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  scrollbar-arrow-color: red;
}

.mainContent::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
  scrollbar-arrow-color: red;
}

.mainContent::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

span {
  cursor: pointer;
}

.formItemWidth {
  width: 30%;
}

.formGroupTitle {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  margin-top: 15px;
  text-align: left;
  /* margin-left: 20px; */
}

.ant-card-head-title {
  padding: 12px 0 !important;
}

.ant-card-grid {
  padding: 12px;
}

.ant-card-head {
  background: transparent;
  border-bottom: 1px solid #e8e8e8;
  padding: 0 24px;
  border-radius: 2px 2px 0 0;
  zoom: 1;
  margin-bottom: -1px;
  min-height: 45px !important;
  font-size: 16px;
  color: #52506b;
  font-weight: 400;
  display: flex;
}

.ant-card .ant-card-grid:nth-child(4n + 1),
.ant-card .ant-card-grid:nth-child(4n + 2) {
  background: #f7f9fc;
}

.ant-card-grid:hover {
  /* box-shadow: none; */
  box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8,
    1px 0 0 0 #e8e8e8 inset, 0 1px 0 0 #e8e8e8 inset;
}
.titleColor {
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
}
.deductPeriodsContent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>